import { Space, Button } from 'antd'
import { useState } from 'react'
import {useComponentsStore} from '../../stores/components'

export default function Header() {
    // const [mode, setMode] = useState('edit')
    const {mode} =useComponentsStore()
    return (
        <div className="w-[100%] h-[100%]">
            <div className="h-[50px] flex justify-between items-center px-[20px]">
                <div>Low Code Editor</div>
                <Space>
                    {mode === 'edit' && (
                        <Button type='primary' onClick={() => useComponentsStore.setState({ mode: 'preview' })}>预览</Button>
                    )
                    }
                    {mode === 'preview' && (
                        <Button type='primary' onClick={() => useComponentsStore.setState({ mode: 'edit' })}>退出预览</Button>
                    )
                    }
                </Space>
            </div>
        </div>
    )
}